<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__bounceOutRight"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <li>
      <span class="iconfont icon-shijian"></span>
      <div>{{ text }}</div>
      <span
        class="iconfont icon-cha"
        @click.self="$emit('dele-history')"
      ></span>
    </li>
  </transition>
</template>

<script>
export default {
  props: ["text"],
};
</script>

<style scoped lang="less">
li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  padding-left: 15px;
  position: relative;
  div {
    flex: 1;
    margin-left: 10px;
    border-bottom: rgb(241, 237, 237) 1px solid;
    padding: 10px 0;
  }
  .icon-shijian {
    color: #ccc;
    font-size: 18px;
  }
  .icon-cha {
    color: rgb(158, 150, 150);
    position: absolute;
    right: 10px;
  }
}
</style>